var config = {
	mode: 'random', // random:随机出图，scale:单图放大
	animation: {
		partOneTime: 2000, // 阶段一动画时间
		partTwoTime: 3000, // 阶段二动画时间
		showTime: 1000 // 单张展示模式展示时间
	},
	ImageContainerArea: {
		left: 30, // 上墙图片容器左边
		top: 285, // 上墙图片容器顶边
		width: 1750, // 上墙图片容器宽度
		height: 235 // 上墙图片容器高度
	},
	PartOneImage: {
		width: 260, // 第一阶段动画，图片的宽度
		height: 260
	},
	WallImage: {
		width: 25, // 图片上墙后的宽度
		height: 25 // 图片上墙后的高度
	},
	debugMode: {
		on: true, // 调试总开关
		opacity: false, // 展示图片透明
		foreHidden: false // 隐藏前景
	},
	maxShowNumber: 10, // 每秒最多显示图片数
	hiddenWidth: { // 图片初始位置设置
		left: 500, // 水平方向宽度
		top: 500, // 垂直方向宽度
		step: 200 // 初始位置改变的步进
	},
	windowSize: { // 窗口大小
		width: 1800,
		height: 960
	},
	useFrame: true
}

// 存放所有可以放图片的位置
var allPosition = getAllImagePosition();
var tempAllPosition = allPosition.concat();
// 第几轮
var batch = 1;
// 展示队列
var queue = [];
//
var showTimer;
//
var update_pos;
//
var keepAliveTimer;

// 初始位置
var img_pos = {
	left: -300,
	top: -300,
	mode: 'default'
}

// 计算所有可以放图片的位置
function getAllImagePosition() {
	var arr = [];
	var left = config.ImageContainerArea.left;
	var top = config.ImageContainerArea.top;
	var width = config.ImageContainerArea.width;
	var height = config.ImageContainerArea.height;
	var WallImageWidth = config.WallImage.width;
	var WallImageHeight = config.WallImage.height;
	var index = 0;
	for(var t = top; t <= top + height - WallImageHeight; t = t + WallImageHeight) {
		for(var l = left; l <= left + width - WallImageWidth; l = l + WallImageWidth) {
			var obj = {
				left: l,
				top: t,
				index: index
			}
			if(obj.left > 550 && obj.left < 581) {
				continue;
			}
			arr.push(obj);
			index++;
		}
	}
	console.log('全部位置共有：' + arr.length + '个')
	return arr;
}

function fillImage() {
	console.log('run', tempAllPosition.length)
	var length = tempAllPosition.length;
	for(var i = 0; i <= length; i++) {
		var index_img = randomNum(0, list_json.length - 1);
		var path = list_json[index_img];
		if(tempAllPosition.length > 0) {
			var index = randomNum(0, tempAllPosition.length - 1);
			var pos = tempAllPosition[index];
			var width = config.WallImage.width;
			var height = config.WallImage.height;
			createImageTagSimple({
				imagePath: 'img/test/' + path,
				batch: batch,
				index: pos.index,
				scaleWidth: width,
				scaleHeight: 31,
				scaleLeft: pos.left,
				scaleTop: pos.top,
				frameid: null
			});
			tempAllPosition.splice(index, 1);
		} else {
			tempAllPosition = allPosition.concat();
			batch++;
		}
	}
	console.log(tempAllPosition.length, batch)
}
console.log(list_json.length)

// 向页面添加图片
function createImageTag(options) {
	var imagePath = options.imagePath,
		index = options.index,
		batch = options.batch,
		scaleWidth = options.scaleWidth,
		scaleHeight = options.scaleHeight,
		scaleLeft = options.scaleLeft,
		scaleTop = options.scaleTop,
		frameid = options.frameid;
	var left = img_pos.left;
	var top = img_pos.top;
	var opc = '';
	if(config.debugMode.on == true && config.debugMode.opacity == true) {
		opc = 'opacity:0.6';
	}
	var divTag = document.createElement('div');
	$(divTag).attr('id', 'img_' + batch + '_' + index);

	var ImgTag = document.createElement('img');
	$(ImgTag).attr('style', 'width: 100%;height: auto;');
	$(ImgTag).attr('src', imagePath);

	$(divTag).append(ImgTag);

	if(config.useFrame) {
		var ImgTagFrame = document.createElement('img');
		$(ImgTagFrame).attr('style', 'width: 100%;height: 100%;position: absolute;left: 0;top: 0;');
		if(frameid == 1) {
			$(ImgTagFrame).attr('src', './img/相框1.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (60 / 375 * 100) + '%;top: ' + (18 / 375 * 100) + '%;')
		}
		if(frameid == 2) {
			$(ImgTagFrame).attr('src', './img/相框2.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 40px;top: 40px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (40 / 375 * 100) + '%;top: ' + (38 / 375 * 100) + '%;')
		}
		if(frameid == 3) {
			$(ImgTagFrame).attr('src', './img/相框3.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 80px;top: 25px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (80 / 375 * 100) + '%;top: ' + (23 / 375 * 100) + '%;')
		}
		if(frameid == 4) {
			$(ImgTagFrame).attr('src', './img/相框4.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 60px;top: 15px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (60 / 375 * 100) + '%;top: ' + (13 / 375 * 100) + '%;')
		}
		if(frameid == 5) {
			$(ImgTagFrame).attr('src', './img/相框5.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 65px;top: 0px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (65 / 375 * 100) + '%;top: 0;')
		}

		$(divTag).append(ImgTagFrame);
	}

	if(config.mode == 'random') {
		// 随机位置
		$(divTag).attr('style', 'display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;left: ' + left + 'px;top: ' + top + 'px;width: ' + config.PartOneImage.width + 'px;height:' + config.PartOneImage.height + 'px;z-index: 10000;overflow:hidden;' + opc)
	} else if(config.mode == 'scale') {
		// 从上至下位置
		$(divTag).attr('style', 'display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;left: 50%;margin-left:-90px;top: -500px;width: ' + config.PartOneImage.width + 'px;z-index: 10000;overflow:hidden;' + opc)
		// 从下至上位置
		//		$(divTag).attr('style', 'display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;left: 50%;margin-left:-90px;top: -500px;width: ' + config.PartOneImage.width + 'px;height:' + config.PartOneImage.height + 'px;z-index: 10000;' + opc)
	}

	$('#img-container').append(divTag)

	ImgTag.onload = function() {
		if(config.mode == 'random') {
			//  随机动画
			$(divTag).animate({
				left: scaleLeft + 'px',
				top: scaleTop + 'px',
			}, config.animation.partOneTime + config.animation.partTwoTime, 'swing')
			setTimeout(function() {
				$(divTag).animate({
					width: scaleWidth + 'px',
					height: scaleHeight == 'auto' ? scaleHeight : scaleHeight + 'px',
					'z-index': '999'
				}, config.animation.partTwoTime)

				$(divTag).dequeue()
			}, config.animation.partOneTime)
		} else if(config.mode == 'scale') {
			$(divTag).animate({
				left: '50%',
				top: '2%',
				'margin-left': '-160px',
				'margin-top': '0px',
				width: config.PartOneImage.width + 'px',

			}, config.animation.partOneTime)
			setTimeout(function() {
				$(divTag).animate({
					left: scaleLeft + 'px',
					top: scaleTop + 'px',
					width: scaleWidth + 'px',
					height: scaleHeight == 'auto' ? scaleHeight : scaleHeight + 'px',
					'margin-left': '0px',
					'margin-top': '0px',
					'z-index': '999'
				}, config.animation.partTwoTime)
			}, config.animation.partOneTime + config.animation.showTime)
		}
		setTimeout(function() {
			if($('#img_' + (batch - 1) + '_' + index).length > 0) {
				$('#img_' + (batch - 1) + '_' + index).remove();
			}
		}, config.animation.partOneTime + config.animation.partTwoTime + config.animation.showTime)
	}
}

function createImageTagSimple(options) {
	var imagePath = options.imagePath,
		index = options.index,
		batch = options.batch,
		scaleWidth = options.scaleWidth,
		scaleHeight = options.scaleHeight,
		scaleLeft = options.scaleLeft,
		scaleTop = options.scaleTop,
		frameid = options.frameid;
	var left = img_pos.left;
	var top = img_pos.top;
	var opc = '';
	if(config.debugMode.on == true && config.debugMode.opacity == true) {
		opc = 'opacity:0.6';
	}
	var divTag = document.createElement('div');
	$(divTag).attr('id', 'img_' + batch + '_' + index);

	var ImgTag = document.createElement('img');
	$(ImgTag).attr('style', 'width: 100%;height: 100%;');
	$(ImgTag).attr('src', imagePath);

	$(divTag).append(ImgTag);

	if(config.useFrame) {
		var ImgTagFrame = document.createElement('img');
		$(ImgTagFrame).attr('style', 'width: 100%;height: 100%;position: absolute;left: 0;top: 0;');
		if(frameid == 1) {
			$(ImgTagFrame).attr('src', './img/相框1.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (60 / 375 * 100) + '%;top: ' + (18 / 375 * 100) + '%;')
		}
		if(frameid == 2) {
			$(ImgTagFrame).attr('src', './img/相框2.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 40px;top: 40px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (40 / 375 * 100) + '%;top: ' + (38 / 375 * 100) + '%;')
		}
		if(frameid == 3) {
			$(ImgTagFrame).attr('src', './img/相框3.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 80px;top: 25px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (80 / 375 * 100) + '%;top: ' + (23 / 375 * 100) + '%;')
		}
		if(frameid == 4) {
			$(ImgTagFrame).attr('src', './img/相框4.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 60px;top: 15px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (60 / 375 * 100) + '%;top: ' + (13 / 375 * 100) + '%;')
		}
		if(frameid == 5) {
			$(ImgTagFrame).attr('src', './img/相框5.png');
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: 65px;top: 0px;')
			$(ImgTag).attr('style', $(ImgTag).attr('style') + 'position:absolute;left: ' + (65 / 375 * 100) + '%;top: 0;')
		}

		$(divTag).append(ImgTagFrame);
	}

	$(divTag).attr('style', 'display:flex;justify-content:center;align-items:center;text-align:center;position:absolute;left: ' + scaleLeft + 'px;top: ' + scaleTop + 'px;width: ' + scaleWidth + 'px;height:' + scaleHeight + 'px;z-index: 999;overflow:hidden;' + opc)

	$('#img-container').append(divTag)

}

//  取随机数
function randomNum(minNum, maxNum) {
	switch(arguments.length) {
		case 1:
			return parseInt(Math.random() * minNum + 1, 10);
			break;
		case 2:
			return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
			break;
		default:
			return 0;
			break;
	}
}

function getQueue() {
	if(queue.length > 0) {
		var res = queue[0];
		queue.splice(0, 1);
		return res;
	}
	return null;
}

function Connect(url, processFunction, options) {
	if(options) {
		config = options;
	}
	var socket = new WebSocket(url);
	socket.onopen = function(e) {
		keepAliveTimer = setInterval(function() {
			socket.send('keep-alive')
		}, 20000)
	}
	socket.onmessage = function(e) {
		var data = e.data;
		data = processFunction(data);
		if(data != null && data.path != null && data.path != '') {
			queue.push(data)
		}
	}

	// 初始位置
	img_pos.left = 0 - options.hiddenWidth.left;
	img_pos.top = 0 - options.hiddenWidth.top;

	if(config.debugMode.on == true && config.debugMode.foreHidden == true) {
		$('.fore').hide();
	}

	allPosition = getAllImagePosition();
	tempAllPosition = allPosition.concat();

	fillImage();

	changeInitPosition();

	show();
}

function show() {
	clearInterval(showTimer);
	showTimer = setInterval(function() {
		var data = getQueue();
		if(data != null) {
			var path = data.path;
			if(tempAllPosition.length > 0) {
				var index = randomNum(0, tempAllPosition.length - 1);
				var pos = tempAllPosition[index];
				var width = config.WallImage.width;
				var height = config.WallImage.height;
				if(config.debugMode.on == true) {
					createImageTag({
						imagePath: 'img/test/' + path,
						batch: batch,
						index: pos.index,
						scaleWidth: width,
						scaleHeight: height,
						scaleLeft: pos.left,
						scaleTop: pos.top,
						frameid: data.id
					});
				} else {
					createImageTag({
						imagePath: path,
						batch: batch,
						index: pos.index,
						scaleWidth: width,
						scaleHeight: height,
						scaleLeft: pos.left,
						scaleTop: pos.top,
						frameid: data.id
					});
				}
				tempAllPosition.splice(index, 1);
			} else {
				tempAllPosition = allPosition.concat();
				batch++;
			}
		}
	}, (1000 / config.maxShowNumber).toFixed(0));
}

function changeInitPosition() {
	//  随机模式下，不断变换图片出现的初始位置
	clearInterval(update_pos);
	update_pos = setInterval(function() {
		var left = img_pos.left;
		var top = img_pos.top;
		var mode = img_pos.mode;
		var horizontalWidth = config.hiddenWidth.left;
		var verticalWidth = config.hiddenWidth.top;
		var windowWidth = config.windowSize.width;
		var windowHeight = config.windowSize.height;
		var step = config.hiddenWidth.step;
		if(top <= 0 - verticalWidth && left <= 0 - horizontalWidth) {
			mode = 'top_to_bottom';
		}
		if(top >= windowHeight + verticalWidth && left <= 0 - horizontalWidth) {
			mode = 'left_to_right';
		}
		if(top >= windowHeight + verticalWidth && left >= windowWidth + horizontalWidth) {
			mode = 'bottom_to_top';
		}
		if(top <= 0 - verticalWidth && left >= windowWidth + horizontalWidth) {
			mode = 'right_to_left';
		}

		if(mode == 'top_to_bottom') {
			top = top + step;
		}
		if(mode == 'left_to_right') {
			left = left + step;
		}
		if(mode == 'bottom_to_top') {
			top = top - step;
		}
		if(mode == 'right_to_left') {
			left = left - step;
		}

		img_pos.top = top;
		img_pos.left = left;
		img_pos.mode = mode;
	}, 50)
}